<template>
    <div class="busiInfo" v-loading="loading">
        <merchantNum :level="level" :busiId="busiId" class="merchant-num" />
        <div class="info-box">
            <div class="info-item" v-for="(item, index) in infoList" :key="index">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import merchantNum from '@/components/merchantNum.vue';
import { useBusiInfo} from '@/hooks/backStage'


const { level,busiId,infoList,loading } = useBusiInfo();
</script>
<style scoped lang="scss">
.merchant-num {
    margin-bottom: 56px;
}

.info-box {
    width: 926px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 25px;
    row-gap: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    color: #3D3D3D;
}
.label::after {
    content: ':';
    margin-right: 10px;
    display: inline-block;
}
</style>